<template>
	<view>
		<view class="p-10">
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">服务器设备</text></view>
					</template>
					<my-grid :list="list1" :col="2" type="lr"></my-grid>
				</u-collapse-item>

				<u-collapse-item name="2">
					<template #title>
						<view class="content-item-title"><text class="title-txt">虚拟机资源统计</text></view>
					</template>
					<my-grid :list="list2" :col="2" type="lr"></my-grid>
				</u-collapse-item>

				<u-collapse-item name="3">
					<template #title>
						<view class="content-item-title"><text class="title-txt">存储使用率</text></view>
					</template>
					<view class="p-10 b-r-4 m-b-10 flex m-between s-center" style="background: #F5F7FE;">
						<view class="flex s-center">
							总容量：
						</view>
						<view class="flex s-center">
							<up-count-to bold class="m-r-5" :endVal="total" decimals="2" color="#0052D9" />
							TB
						</view>
					</view>
					<view class="charts-box">
						<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="4">
					<template #title>
						<view class="content-item-title"><text class="title-txt">巡检统计</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="5">
					<template #title>
						<view class="content-item-title"><text class="title-txt">动环信息</text></view>
					</template>
					<my-grid :list="list3" :col="3" decimals="2" />
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script setup>
	import {
		getApiFabric,
	} from "@/api/customApi";

	const collapse = ref(null),
		showMoreKeys = ref([1, 2, 3, 4, 5]);
	/************************************************** 主机资源统计 *************************************/
	const list1 = ref([{
		img: 'sjzx/1.png',
		key: 'normal',
		title: "运行",
		value: 15,
		unit: "台"
	}, {
		img: 'sjzx/2.png',
		key: 'poweroff',
		title: "停止",
		value: 0,
		unit: "台"
	}, {
		img: 'sjzx/3.png',
		key: 'fault',
		title: "故障",
		value: 0,
		unit: "台"
	}, {
		img: 'sjzx/4.png',
		key: 'others',
		title: "其他",
		value: 0,
		unit: "台"
	}])

	function fn1() {
		getApiFabric({
			apiCode: "45996ad0-b12b-460d-8964-5f2b1648f534",
			propertyMapping: {
				key: "name",
				val: "val"
			}
		}).then((res) => {
			const data = ArrayToObj(res.data);
			list1.value.forEach(item => {
				item.value = data[item.key]
			})
			nextTick(() => {
				collapse.value.init();
			})
		})
	}

	/************************************************** 虚拟机资源统计 *************************************/
	const list2 = ref([{
		img: 'sjzx/1.png',
		key: 'running',
		title: "运行",
		value: 81,
	}, {
		img: 'sjzx/2.png',
		key: 'stopped',
		title: "停止",
		value: 0,
	}, {
		img: 'sjzx/3.png',
		key: 'fault',
		title: "故障",
		value: 0,
	}, {
		img: 'sjzx/4.png',
		key: 'others',
		title: "其他",
		value: 0,
	}])

	function fn2() {
		getApiFabric({
			apiCode: "56b1c422-a91f-4f35-b71f-4a195c24d924",
			propertyMapping: {
				key: "name",
				val: "val"
			}
		}).then((res) => {
			const data = ArrayToObj(res.data);
			list2.value.forEach(item => {
				item.value = data[item.key]
			})
			nextTick(() => {
				collapse.value.init();
			})
		})
	}
	/**************************************************存储使用率**************************************/
	let chartData = ref({}),
		total = ref(0),
		opts = ref({
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4"],
			padding: [10, 0, 0, 0],
			legend: {
				show: true,
				position: "top",
				padding: 0,
				margin: 0,
				fontSize: 10,
				itemGap: 0,
			},
			title: {
				name: "0",
				fontSize: 30,
				color: "#000",
				offsetY: -5,
			},
			subtitle: {
				name: "使用率",
				fontSize: 15,
				color: "#000"
			},
			extra: {
				ring: {
					ringWidth: 20,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 10,
				}
			}
		})

	function fn3() {
		getApiFabric({
			apiCode: "b2af97df-05ce-4436-9bc2-3b8b704e827e",
			propertyMapping: {
				name: "name",
				value: "val"
			},
		}).then((res) => {
			const data = ArrayToObj(res.data, {
				key: 'name',
				val: 'value'
			});
			total.value = res.data.reduce((prev, cur) => {
				cur.value = Number(cur.value);
				return prev + Number(cur.value)
			}, 0)
			opts.value.title.name = ((data['已用(TB)'] / total.value) * 100).toFixed(2) + '%'

			chartData.value = JSON.parse(JSON.stringify({
				series: [{
					data: res.data
				}]
			}));
			nextTick(() => {
				collapse.value.init();
			})
		})
	}

	/**************************************************健康巡检得分**************************************/
	let chartData2 = ref({}),
		opts2 = ref({
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4"],
			padding: [10, 0, 0, 0],
			legend: {
				show: true,
				position: "top",
				padding: 0,
				margin: 0,
				fontSize: 10,
				itemGap: 0,
			},
			title: {
				name: 61,
				fontSize: 30,
				color: "#000"
			},
			subtitle: {
				name: "总数",
				fontSize: 15,
				color: "#000"
			},
			extra: {
				ring: {
					ringWidth: 20,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 10,
				}
			}
		})

	function fn4() {
		getApiFabric({
			apiCode: "e1cfbc2a-ad17-4112-8b23-0bc122dc5097",
			propertyMapping: {
				name: "name",
				value: "val"
			}
		}).then((res) => {
			let total = 0;
			res.data.forEach(item => {
				item.labelText = item.name + ":" + item.value;
				total += Number(item.value)
			})
			opts2.value.title.name = total;
			chartData2.value = JSON.parse(JSON.stringify({
				series: [{
					data: res.data
				}]
			}));
			nextTick(() => {
				collapse.value.init();
			})
		})
	}

	/**************************************************温湿度检测**************************************/
	const list3 = ref([{
		key: '在线点0',
		title: "设备1状态",
		value: '在线',
	}, {
		key: '温度0',
		title: "温度",
		value: 0,
		unit: '℃'
	}, {
		key: '湿度0',
		title: "湿度",
		value: 0,
		unit: '%'
	}, {
		key: '在线点1',
		title: "设备2状态",
		value: '在线',
	}, {
		key: '温度1',
		title: "温度",
		value: 0,
		unit: '℃'
	}, {
		key: '湿度1',
		title: "湿度",
		value: 0,
		unit: '%'
	}, {
		key: '在线点2',
		title: "设备3状态",
		value: '在线',
	}, {
		key: '温度2',
		title: "温度",
		value: 0,
		unit: '℃'
	}, {
		key: '湿度2',
		title: "湿度",
		value: 0,
		unit: '%'
	}, {
		key: '在线点3',
		title: "设备4状态",
		value: '在线',
	}, {
		key: '温度3',
		title: "温度",
		value: 0,
		unit: '℃'
	}, {
		key: '湿度3',
		title: "湿度",
		value: 0,
		unit: '%'
	}])

	function fn6() {
		getApiFabric({
			apiCode: "93596148-3289-4f34-85f5-74a914a05b3b",
			propertyMapping: {
				key: "name",
				val: "val"
			},
		}).then((res) => {
			const data = ArrayToObj(res.data);
			list3.value.forEach(item => {
				item.value = data[item.key]
			})
			nextTick(() => {
				collapse.value.init();
			})
		})
	}

	function getServerData(refresh) {
		Promise.all([fn1(), fn2(), fn3(), fn4(), fn6()]).then(() => {
			if (refresh) {
				nextTick(() => {
					uni.stopPullDownRefresh()
				})
			}
		});
	}

	onShow(() => {
		getServerData()
	})

	onPullDownRefresh(() => {
		getServerData(true)
	})
</script>

<style scoped lang="scss">
</style>